<template>
  <div class="Result test-1">
    <van-tabs>
      <van-tab title="单曲">
        <div class="single"><Jie></Jie><Gequ :Gequ="singleshuju"></Gequ></div>
      </van-tab>
      <van-tab title="歌手">
        <div class="singer">
          <div
            class="singer-kuan"
            v-for="(item, index) in ResultTwoshuju"
            :key="index"
            :class="[index % 2 == 0 ? 'actevr' : '']"
            @click="SingerDetailsPage(item.id)"
          >
            <div class="singer-img">
              <img :src="item.img1v1Url" alt="" />
            </div>
            <div class="singer-text">{{ item.name }}</div>
          </div>
        </div>
      </van-tab>
      <van-tab title="专辑">
        <div class="Album">
          <div
            class="Album-kuan"
            v-for="(item, index) in ResultOneshuju"
            :key="index"
          >
            <div class="Album-img" @click="AlbumDetails(item.id)">
              <img :src="item.blurPicUrl" alt="" />
            </div>
            <div class="Album-text" @click="AlbumDetails(item.id)">
              {{ item.name }}
            </div>
            <div class="Album-text" @click="SingerDetailsPage(item.artist.id)">
              {{ item.artist.name }}
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="MV">
        <div class="MV">
          <!-- <div class="MV-kuan">
            <div class="MV-img">
              <img :src="" alt="" /> 
            </div>
            <div class="MV-text">
              <div class="MV-text-one">1</div>
            </div>
          </div> -->
          <div
            class="MV-kuan"
            v-for="(item, index) in MVshuju"
            :key="index"
            @click="Videotiaozhuan(item.id)"
          >
            <div class="MV-img">
              <img :src="item.cover" alt="" />
            </div>
            <div class="MV-text">
              <div class="MV-text-one">{{ item.name }}</div>
            </div>
          </div>
          <div class="clear"></div>
        </div>
      </van-tab>
      <!-- <van-tab title="视频">
        <div class="Video">
          <div
            class="Video-kuan"
            v-for="(item, index) in Videoshuju"
            :key="index"
            @click="VideoOne(item.vid)"
          >
            <div class="Video-img">
              <img :src="item.coverUrl" alt="" />
            </div>
            <div class="Video-text">
              <div class="Video-text-one">{{ item.title }}</div>
            </div>
          </div>
          <div class="clear"></div>
        </div>
      </van-tab> -->
    </van-tabs>
  </div>
</template>
<script>
import Jie from "../components/Jie.vue";
import Gequ from "../components/Gequ.vue";
export default {
  name: "Result",
  data() {
    return {
      value: "",
      singleshuju: [],
      ResultOneshuju: [],
      ResultTwoshuju: [],
      MVshuju: [],
      Videoshuju: [],
    };
  },
  components: {
    Jie,
    Gequ,
  },
  created() {
    this.set();
  },
  methods: {
    set() {
      setInterval(() => {
        this.value = this.$route.params.val;
        this.Result();
        this.ResultOne();
        this.ResultTwo();
        this.ResultThree();
        this.Resultfrou();
      }, 1000);
    },
    SingerDetailsPage(id) {
      // console.log('id==>',id);
      this.$router.push({ name: "SingerDetailsPage", params: { id } });
    },
    AlbumDetails(id) {
      // console.log('id==>',id);
      this.$router.push({ name: "AlbumDetails", params: { id } });
    },
    Result() {
      this.axios({
        method: "get",
        url: "/cloudsearch?limit=100&type=1&keywords=" + this.value,
      })
        .then((result) => {
          // console.log("result=0=>", result.data.result.songs);
          this.singleshuju = result.data.result.songs;
        })
        .catch((err) => {
          console.log("err==>", err);
        });
    },
    ResultOne() {
      this.axios({
        method: "get",
        url: "/cloudsearch?limit=100&type=10&keywords=" + this.value,
      })
        .then((result) => {
          // console.log("result=1=>", result.data.result.albums);
          this.ResultOneshuju = result.data.result.albums;
        })
        .catch((err) => {
          console.log("err==>", err);
        });
    },
    ResultTwo() {
      this.axios({
        method: "get",
        url: "/cloudsearch?limit=100&type=100&keywords=" + this.value,
      })
        .then((result) => {
          // console.log("result=2=>", result.data.result.artists);
          this.ResultTwoshuju = result.data.result.artists;
        })
        .catch((err) => {
          console.log("err==>", err);
        });
    },
    ResultThree() {
      this.axios({
        method: "get",
        url: "/cloudsearch?limit=100&type=1004&keywords=" + this.value,
      })
        .then((result) => {
          // console.log("result=3=>", result);
          this.MVshuju = result.data.result.mvs;
        })
        .catch((err) => {
          console.log("err==>", err);
        });
    },
    Resultfrou() {
      this.axios({
        method: "get",
        url: "/cloudsearch?limit=100&type=1014&keywords=" + this.value,
      })
        .then((result) => {
          // console.log("result=4=>", result);
          this.Videoshuju = result.data.result.videos;
        })
        .catch((err) => {
          console.log("err==>", err);
        });
    },
    Videotiaozhuan(id) {
      this.$router.push({ name: "Video", params: { id } });
    },
    VideoOne(id) {
      this.$router.push({ name: "VideoOne", params: { id } });
    },
  },
};
</script>

<style lang="less" scoped>
.test-1::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
.test-1::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  // border-radius: 10px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #b3b3b3;
}
.test-1::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  // border-radius: 10px;
  background: #ededed;
}
::v-deep .van-tabs--line .van-tabs__wrap {
  width: 100%;
  height: 30px;
}
.clear {
  clear: both;
  width: 100%;
  height: 1px;
}
.Result {
  width: 712.5px;
  height: 500px;
  overflow-y: scroll;
  background-color: white;
}
.single {
  width: 712.5px;
  height: 500px;
}
.Video {
  width: calc(100% - 40px);
  height: calc(100% - 40px);
  padding: 20px;
  .Video-kuan {
    float: left;
    width: calc(33% - 10px);
    height: 130px;
    padding: 5px;
    cursor: pointer;
    .Video-img {
      width: 100%;
      height: 105px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .Video-text {
      .Video-text-one {
        width: 100%;
        height: 25px;
        font-weight: 300;
        font-size: 11px;
        line-height: 25px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}
.MV {
  width: calc(100% - 40px);
  height: calc(100% - 40px);
  padding: 20px;
  .MV-kuan {
    float: left;
    width: calc(33% - 10px);
    height: 130px;
    padding: 5px;
    cursor: pointer;
    .MV-img {
      width: 100%;
      height: 105px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .MV-text {
      .MV-text-one {
        width: 100%;
        height: 25px;
        font-weight: 300;
        font-size: 11px;
        line-height: 25px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}
.actevr {
  background-color: rgb(245, 245, 245);
}
.singer {
  width: 712.5px;
  height: 500px;
  .singer-kuan {
    width: calc(100% - 40px);
    height: 60px;
    padding: 5px 20px;
    cursor: pointer;
    .singer-img {
      float: left;
      width: 60px;
      height: 60px;
      img {
        width: 100%;
        height: 100%;
        border-radius: 5px;
      }
    }

    .singer-text {
      float: left;
      width: calc(90% - 10px);
      height: 60px;
      padding-left: 10px;
      line-height: 60px;
      font-size: 11px;
    }
  }
  .singer-kuan:hover {
    background-color: rgb(235, 235, 235);
  }
}
.Album {
  width: 712.5px;
  height: 500px;
  .Album-kuan {
    width: calc(100% - 40px);
    height: 60px;
    padding: 5px 20px;
    cursor: pointer;
    line-height: 60px;
    font-size: 11px;
    color: rgb(80, 80, 80);
    .Album-img {
      float: left;
      width: 60px;
      height: 60px;
      img {
        width: 100%;
        height: 100%;
        border-radius: 5px;
      }
    }
    .Album-text {
      float: left;
      width: calc(46% - 20px);
      padding-left: 10px;
      height: 60px;
    }
    .Album-text:hover {
      color: black;
    }
  }
  .Album-kuan:hover {
    background-color: rgb(235, 235, 235);
  }
}
</style>